
<!DOCTYPE html>
<html>
<head>
<!-- Standard Meta -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport"
	content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">

<link rel="image_src" type="image/jpeg" href="/images/logo.png" />

<!-- Site Properities -->
<meta name="generator" content="DocPad v6.79.4" />
<title>用户一览</title>

<meta name="description"
	content="A tab is a hidden section of content activated by a menu" />
<meta name="keywords"
	content="html5, ui, library, framework, javascript" />
<script src="../resources/static/libs/detect.min.js"></script>
<script src="../resources/static/libs/jquery.min.js"></script>
<script src="../resources/static/libs/clipboard-polyfill.js"></script>
<script src="../resources/static/libs/cookies.js"></script>
<script src="../resources/static/libs/jquery.easing.1.3.js"></script>
<script src="../resources/static/libs/highlight.js"></script>
<script src="../resources/static/libs/jquery.history.js"></script>
<script src="../resources/static/libs/tablesort.min.js"></script>
<script src="../resources/static/libs/echarts.min.js"></script>
<script src="../resources/dist/semantic.js"></script>
<script src="../resources/js/docs.js"></script>
<script src="../resources//dist/components/tab.js"></script>
<link rel="stylesheet" type="text/css" class="ui"
	href="../resources/dist/semantic.css">
<link rel="stylesheet" type="text/css"
	href="../resources/static/style/docs.css">
<link rel="stylesheet" type="text/css"
	href="../resources/static/style/rtl.css">
<script type="text/javascript">
	window.liveSettings = {
		api_key : '9ede3015b9f84c1aabc81ab839c55d74',
		parse_attr : [ 'data-title', 'data-content' ],
		detectlang : false,
		autocollect : true,
		ignore_tags : [ 'i', 'code', 'pre' ],
		parse_attr : [ 'data-title', 'data-content', 'data-text' ],
		ignore_class : [ 'code', 'anchor' ]
	};
	$(document).ready(function() {
		$('.ui.accordion').accordion('refresh');
	});
</script>
</head>
<body id="example" class="" ontouchstart="">
	<div class="pusher">
		<div class="full height">
			<div class="article">
				<script src="../resources/static/libs/sinon.js"></script>
				<div class="ui masthead vertical tab segment">
					<div class="ui container">
						<div class="introduction">
							<div class=" ui container">
								<div class="ui four stackable cards">
									<div class="card">
										<div class="content">
											<div class="header">Elliot Fu</div>
											<div class="description">Elliot Fu is a film-maker from
												New York.</div>
										</div>
										<div class="ui bottom attached button">
											<i class="add icon"></i> Add Friend
										</div>
									</div>
									<div class="card">
										<div class="content">
											<div class="header">Elliot Fu</div>
											<div class="description">Elliot Fu is a film-maker from
												New York.</div>
										</div>
										<div class="ui bottom attached button">
											<i class="add icon"></i> Add Friend
										</div>
									</div>
									<div class="card">
										<div class="content">
											<div class="header">Veronika Ossi</div>
											<div class="description">Veronika Ossi is a set
												designer living in New York who enjoys kittens, music, and
												partying.</div>
										</div>
										<div class="ui bottom attached button">
											<i class="add icon"></i> Add Friend
										</div>
									</div>
									<div class="card">
										<div class="content">
											<div class="header">Jenny Hess</div>
											<div class="description">Jenny is a student studying
												Media Management at the New School</div>
										</div>
										<div class="ui bottom attached button">
											<i class="add icon"></i> Add Friend
										</div>
									</div>
								</div>
							</div>
							<div class="ui hidden divider"></div>
						</div>
					</div>
				</div>
				<div class="ui container">
					<div class="ui hidden divider"></div>
					<table class="ui celled striped table">
						<thead>
							<tr>
								<th colspan="3"><div class="ui ribbon label">用户 仓库</div></th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="collapsing"><h4 class="ui header">
										<i class="folder icon"></i>
										<div class="content">
											用户状态
											<div class="sub header">Human Resources</div>
										</div>
									</h4></td>
								<td>正在初始化</td>
								<td class="right aligned collapsing">10 个小时前更新的</td>
							</tr>
						</tbody>
					</table>

					<div class="ui vertical fluid accordion menu">
						<div class="item">
							<a class="active title"> <i class="dropdown icon"></i> Size
							</a>
							<div class="active center aligned content">
								<div id="main" style="width: 100% px; height: 300px;"></div>
								<div class="ui divider"></div>
								<div class="ui center aligned grid">
									<div class="four wide column">
										<div class="ui icon">
											<div class="ui mini statistic horizontal">
												<div class="value"><i class="caret up icon"></i> 5,550</div>
												<div class="label">%</div>
											</div>
											<div class="content">
												月季打卡率
												<div class="sub header">数据的频率与活动的频率相关</div>
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>


				</div>
			</div>
		</div>

		<script>
			window.less = {
				async : true,
				environment : 'production',
				fileAsync : false,
				onReady : false,
				useFileCache : true
			};
		</script>
		<script type="text/javascript">
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('main'));

			var xAxisData = [];
			var data1 = [];
			var data2 = [];
			for (var i = 1; i <= 60; i++) {
			    xAxisData.push(i+'分钟');
			    data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
			    data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
			}

			option = {
			    title: {
			        text: '柱状图动画延迟'
			    },
			    legend: {
			        data: ['在线用户', '在线用户'],
			        align: 'left'
			    },
			    toolbox: {
			        // y: 'bottom',
			        feature: {
			            magicType: {
			                type: ['stack', 'tiled']
			            },
			            dataView: {},
			            saveAsImage: {
			                pixelRatio: 2
			            }
			        }
			    },
			    tooltip: {},
			    xAxis: {
			        data: xAxisData,
			        silent: false,
			        splitLine: {
			            show: false
			        }
			    },
			    yAxis: {
			    },
			    series: [{
			        name: 'bar',
			        type: 'bar',
			        data: data1,
			        animationDelay: function (idx) {
			            return idx * 10;
			        }
			    }, {
			        name: 'bar2',
			        type: 'bar',
			        data: data2,
			        animationDelay: function (idx) {
			            return idx * 10 + 100;
			        }
			    }],
			    animationEasing: 'elasticOut',
			    animationDelayUpdate: function (idx) {
			        return idx * 5;
			    }
			};

			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
		<script src="../resources/static/libs/less.min.js"></script>
</body>
</html>